import React, { useState } from 'react';
import { ConnectProps, history } from 'umi';
import { Helmet } from 'react-helmet';
import { Card,NavBar, List,Tag, Toast } from 'antd-mobile';
import { Topic } from '@/components';
import { upsetArray } from '@/utils';
import  styles from './index.less';

function Answer() {
  // 题目详情
  const [topicInfo,settopicInfo] = useState<any>({})
  // 当前页数
  const [curPage,setcurPage] =useState(1)
  // 总数
  const [total,settotal] = useState(1)
  // 题目列表
  const [topicList,settopicList] = useState<any>([])
  //1练习 2模拟  3考试
  const [type,setType] =useState<1|2>(1)
  // 正确的数量
  const [correctNumber,setcorrectNumber] =useState(0)
  // 错误的数量
  const [failNumber,setfailNumber] =useState(0)
  // 错误列表
  const [failList,setfailList] =useState([])
  // 正确答案
  const [rightAnswer,setrightAnswer] =useState([])
  // 答题
  const [answer,setanswer] =useState([])
  // 分数
  const [fraction,setfraction] =useState(0)
  // 设置
  const [projectSetting,setprojectSetting] =useState<any>({})
  // 是否查看
  const [isOnlyShow,setisOnlyShow] = useState(false)
  // 是否正确
  const [isRight,setisRight] = useState(false)
  projectSetting
  const {
    anserContentList=[],
    content={},
    answerList=[]
  } = topicInfo

  // 遍历选项
  const renderOptions = (arr=[]) => {
    
    // 乱序
    if(projectSetting.optionIsOutOfOrder===1){
      arr =upsetArray(arr)
    }
    return arr.map(item=>{
      const data = (item.content&&item.content.id)?item.content:item
      return {
        label: <div dangerouslySetInnerHTML= {{ __html: data.content }}></div>, 
        value: data.associateId
      }
    })
  }
  const renderQuestion = (data:any={})=> {
    return data.content?<div dangerouslySetInnerHTML= {{ __html: data.content }}></div>:''
  }
  const onPre = async(page?)=>{

  }
  // 下一题
  const onNext = async () => {

  }
  // 提交答案
  const onSubmit = async(value=[],isForce=false) => {
    
  }

  return (
    <div className={styles.answer}>
      <Helmet title="第三章"/>
      {/* <div className={styles.statistics}>历史数据：正确2次 错误3次 正确率40.00%</div>
      <Card full>
        <Card.Header title={<><Tag>常规题</Tag>
          <Tag selected>单选题</Tag>
          <Tag>非图片题</Tag>
          <Tag>错5次</Tag></>}/>
        <Card.Body>
          <div className={styles.title}>①用表面积法是检验硅盐酸水泥的哪种性质？<span>1/10</span></div>
        </Card.Body>

      </Card> */}
      {/* <Topic 
        question={renderQuestion(content)} 
        current={curPage}
        isCheckbox={topicInfo.type===2}
        total={total}
        timeLimit={projectSetting.timeLimit}
        // timeLimit={0.1}
        isOnlyShow={isOnlyShow}
        isRight={isRight}
        value={answer}
        answer={rightAnswer}
        correctNumber={correctNumber}
        onPre={() => onPre()}
        onNext={() => onNext()}
        failNumber={failNumber}
        onSubmit={(v)=>onSubmit(v)}
        type={type}
        parse={renderQuestion(topicInfo.analysis)}
        options={renderOptions(anserContentList||answerList)}
        forceEnd={(v)=>this.onSubmit(v,true)} /> */}
        <Topic
    question='计算机取证是将计算机调查和分析技术应用于对潜在的、有法律效应的确定和提取。以下关于计算机取证的描述中，错误的是（  ）'
    current={2}
    total={3}
    // isOnlyShow
    title="第三章"
    isRight={false}
    value={[0, 1, 3]}
    answer={[2, 3]}
    correctNumber={2}
    onPre={() => { }}
    onNext={() => { }}
    failNumber={3}
    upset
    parse='计算机取证包括保护目标计算机系统、确定电子证据、收集电子证据和保存电子证据。对现场计算机的部分通用处理原则有：已经开机的计算机不要关机，关机的计算机不要开机。'
    options={[
      { label: '计算机取证包括对以磁介质编码信息方式存储的计算机证据的提取和归档0', value: 0 },
      { label: '计算机取证包括对以磁介质编码信息方式存储的计算机证据的提取和归档1', value: 1 },
      { label: '计算机取证包括对以磁介质编码信息方式存储的计算机证据的提取和归档2', value: 2 },
      { label: '计算机取证包括对以磁介质编码信息方式存储的计算机证据的提取和归档3', value: 3 },
    ]} />
    </div>
  );
}

export default Answer;
